<template>
  <div class="music-list">
    <div class="music-list-banner">
      <div
        class="music-list-banner-cover"
        :style="[{ backgroundImage: `url('${coverImgUrl}')` }]"
      ></div>
      <div class="music-list-banner-img">
        <img :src="coverImgUrl" alt="" />
        <div class="music-list-banner-img-info">
          {{ formatPlayCount(playCount) }}人播放
        </div>
      </div>
      <div class="music-list-banner-info">
        <div class="music-list-banner-info-name">{{ name }}</div>
        <div class="music-list-banner-info-userinfo">
          <img :src="creator.avatarUrl" alt="" class="userinfo-img" />
          {{ creator.nickname }}
        </div>
        <div class="music-list-banner-info-like">
          <div
            class="like-icon"
            @click="favOprate"
            :class="{ active: favPlayList }"
          ></div>
        </div>
      </div>
    </div>
    <div class="music-list-content">
      <div class="music-list-content-title">歌曲列表</div>
      <music-item
        v-for="(item, index) in tracks"
        :key="index"
        :musicIndex="index"
        :id="item.id"
        :name="item.name"
        :artists="item.artists"
        :album="item.album"
      ></music-item>
    </div>
  </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs, computed } from "vue";
import { MusicItem } from "@/components";
import { httpService } from "@/core/http";
import api from "@/api";
import { useRoute } from "vue-router";
import storage, { EStorage } from "@/core/storage";
export default defineComponent({
  name: "MusicList",
  components: {
    MusicItem,
  },
  setup() {
    const { id } = useRoute().query;
    const state = reactive({
      creator: { nickname: "昵称", avatarUrl: "" },
      name: "歌单名称",
      playCount: 0,
      tracks: [],
      coverImgUrl: "",
      /** 是否收藏了该歌单 */
      favPlayList: false,
    });
    /** 初始化是否收藏歌单 */
    const initFavStatus = () => {
      const likePlayList = storage.get(EStorage.favPlayList) || [];
      state.favPlayList =
        likePlayList.findIndex((op: any) => op.id === id) !== -1;
    };
    /** 获取歌单信息 */
    const getMusicList = (id: number) => {
      httpService("GET", api.getPlayList, { id }).then((res: any) => {
        const { code, result } = res;
        if (code === 200 && result) {
          const { creator, name, playCount, tracks, coverImgUrl } = result;
          state.creator = creator;
          state.name = name;
          state.playCount = playCount;
          state.tracks = tracks;
          state.coverImgUrl = coverImgUrl;
        } else {
          getMusicList(id);
        }
      });
    };
    /** 格式化播放数量 */
    const formatPlayCount = computed(() => {
      return (times: number) => {
        return times > 10000 ? Math.floor(times / 10000) + "万" : times;
      };
    });
    /** 收藏歌单 */
    const favThisPlayList = () => {
      const likePlayList = storage.get(EStorage.favPlayList) || [];
      if (!likePlayList.find((op: any) => op.id === id)) {
        state.favPlayList = true;
        storage.set(
          EStorage.favPlayList,
          likePlayList.concat({
            creater: state.creator.nickname,
            name: state.name,
            trackCount: state.tracks.length,
            coverImgUrl: state.coverImgUrl,
            id,
          })
        );
      }
    };
    /** 取消收藏歌单 */
    const removeThisPlayList = () => {
      const likePlayList = storage.get(EStorage.favPlayList) || [];
      if (likePlayList.find((op: any) => op.id === id)) {
        state.favPlayList = false;
        likePlayList.splice(
          likePlayList.findIndex((op: any) => op.id === id),
          1
        );
        storage.set(EStorage.favPlayList, likePlayList);
      }
    };
    /** 收藏/取消歌单 */
    const favOprate = () => {
      if (state.favPlayList) removeThisPlayList();
      else favThisPlayList();
    };
    getMusicList(Number(id));
    initFavStatus();
    return {
      ...toRefs(state),
      getMusicList,
      formatPlayCount,
      initFavStatus,
      favOprate,
      favThisPlayList,
      removeThisPlayList,
    };
  },
});
</script>

<style lang='scss' scoped>
.music-list {
  @extend .screen_page;
  .music-list-banner {
    padding: 30px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    .music-list-banner-cover {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      filter: blur(15px);
    }
    .music-list-banner-img {
      width: 126px;
      height: 126px;
      position: relative;
      .music-list-banner-img-info {
        height: 25px;
        background-color: rgba(0, 0, 0, 0.5);
        font-size: 10px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        color: #fff;
        &::before {
          content: "";
          width: 15px;
          height: 15px;
          background-image: url("../home/images/music.svg");
          background-size: 100% 100%;
          background-repeat: no-repeat;
          margin: 0 5px 0 2px;
        }
      }
      img {
        width: 100%;
        height: 100%;
      }
    }
    .music-list-banner-info {
      position: relative;
      margin-left: 15px;
      flex: 1;
      height: 126px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-end;
      font-weight: 600;
      color: #fff;
      & > div {
        width: 100%;
      }
      .music-list-banner-info-name {
        height: 45px;
        font-size: 17px;
        display: -webkit-box; /**对象作为伸缩盒子模型展示**/
        -webkit-box-orient: vertical; /**设置或检索伸缩盒子对象的子元素的排列方式**/
        -webkit-line-clamp: 2; /**显示的行数**/
        overflow: hidden; /**隐藏超出的内容**/
      }
      .music-list-banner-info-userinfo {
        height: 30px;
        font-size: 14px;
        display: flex;
        align-items: center;
        margin-top: 10px;
        .userinfo-img {
          width: 30px;
          height: 30px;
          border-radius: 50%;
          margin-right: 5px;
        }
      }
      .music-list-banner-info-like {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        .like-icon {
          width: 20px;
          height: 20px;
          background-image: url("./images/like_white.svg");
          background-repeat: no-repeat;
          background-size: 100% 100%;
          &.active {
            background-image: url("./images/like_red.svg");
          }
        }
      }
    }
  }
  .music-list-content {
    .music-list-content-title {
      padding: 10px 0 10px 35px;
      box-sizing: border-box;
      color: #707070;
      font-size: 14px;
      font-weight: 600;
      position: sticky;
      top: 0;
      left: 0;
      width: 100%;
      background: #eeeff0;
    }
  }
}
</style>